<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit">

    <title>素材火www.sucaihuo.com - 高级表单元素</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link href="css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">

    <link href="css/plugins/chosen/chosen.css" rel="stylesheet">

    <link href="css/plugins/switchery/switchery.css" rel="stylesheet">

    <link href="css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">

    <link href="css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">

    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">

    <link href="css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">

    <link href="css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=2.2.0" rel="stylesheet">

</head>

<body>
    <div id="wrapper">
        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="nav-header">

                        <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="img/profile_small.jpg" />
                             </span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">Beaut-zihan</strong>
                             </span>  <span class="text-muted text-xs block">超级管理员 <b class="caret"></b></span> </span>
                            </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="form_avatar.html">修改头像</a>
                                </li>
                                <li><a href="profile.html">个人资料</a>
                                </li>
                                <li><a href="contacts.html">联系我们</a>
                                </li>
                                <li><a href="mailbox.html">信箱</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="login.html">安全退出</a>
                                </li>
                            </ul>
                        </div>
                        <div class="logo-element">
                            H+
                        </div>

                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-th-large"></i> <span class="nav-label">主页</span> <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="index_1.html">主页示例一</a>
                            </li>
                            <li><a href="index_2.html">主页示例二</a>
                            </li>
                            <li><a href="index_3.html">主页示例三</a>
                            </li>
                            <li><a href="index_4.html">主页示例四</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="layouts.html"><i class="fa fa-columns"></i> <span class="nav-label">布局</span><span class="label label-danger pull-right">2.0</span></a>
                    </li>                    
                    <li>
                        <a href="index.html#"><i class="fa fa fa-globe"></i> <span class="nav-label">v2.0新增</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="toastr_notifications.html">Toastr通知</a>
                            </li>
                            <li><a href="nestable_list.html">嵌套列表</a>
                            </li>
                            <li><a href="timeline_v2.html">时间轴</a>
                            </li>
                            <li><a href="forum_main.html">论坛</a>
                            </li>
                            <li><a href="code_editor.html">代码编辑器</a>
                            </li>
                            <li><a href="modal_window.html">模态窗口</a>
                            </li>
                            <li><a href="validation.html">表单验证</a>
                            </li>
                            <li><a href="tree_view_v2.html">树形视图</a>
                            </li>
                            <li><a href="chat_view.html">聊天窗口</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="index.html#"><i class="fa fa-bar-chart-o"></i> <span class="nav-label">图表</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="graph_echarts.html">百度ECharts</a>
                            </li>
                            <li><a href="graph_flot.html">Flot</a>
                            </li>
                            <li><a href="graph_morris.html">Morris.js</a>
                            </li>
                            <li><a href="graph_rickshaw.html">Rickshaw</a>
                            </li>
                            <li><a href="graph_peity.html">Peity</a>
                            </li>
                            <li><a href="graph_sparkline.html">Sparkline</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="mailbox.html"><i class="fa fa-envelope"></i> <span class="nav-label">信箱 </span><span class="label label-warning pull-right">16</span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="mailbox.html">收件箱</a>
                            </li>
                            <li><a href="mail_detail.html">查看邮件</a>
                            </li>
                            <li><a href="mail_compose.html">写信</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="widgets.html"><i class="fa fa-flask"></i> <span class="nav-label">小工具</span></a>
                    </li>
                    <li class="active">
                        <a href="index.html#"><i class="fa fa-edit"></i> <span class="nav-label">表单</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="form_basic.html">基本表单</a>
                            </li>
                            <li><a href="form_validate.html">表单验证</a>
                            </li>
                            <li class="active"><a href="form_advanced.html">高级插件</a>
                            </li>
                            <li><a href="form_wizard.html">步骤条</a>
                            </li>
                            <li><a href="form_webuploader.html">百度WebUploader</a>
                            </li>
                            <li><a href="form_file_upload.html">文件上传</a>
                            </li>
                            <li><a href="form_editors.html">富文本编辑器</a>
                            </li>
                            <li><a href="form_simditor.html">simditor</a>
                            </li>
                            <li><a href="form_avatar.html">头像裁剪上传</a>
                            </li>
                            <li><a href="layerdate.html">日期选择器layerDate</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-desktop"></i> <span class="nav-label">页面</span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="contacts.html">联系人</a>
                            </li>
                            <li><a href="profile.html">个人资料</a>
                            </li>
                            <li><a href="projects.html">项目</a>
                            </li>
                            <li><a href="project_detail.html">项目详情</a>
                            </li>
                            <li><a href="file_manager.html">文件管理器</a>
                            </li>
                            <li><a href="calendar.html">日历</a>
                            </li>
                            <li><a href="faq.html">帮助中心</a>
                            </li>
                            <li><a href="timeline.html">时间轴</a>
                            </li>
                            <li><a href="pin_board.html">标签墙</a>
                            </li>
                            <li><a href="invoice.html">单据</a>
                            </li>
                            <li><a href="login.html">登录</a>
                            </li>
                            <li><a href="register.html">注册</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-files-o"></i> <span class="nav-label">其他页面</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="search_results.html">搜索结果</a>
                            </li>
                            <li><a href="lockscreen.html">登录超时</a>
                            </li>
                            <li><a href="404.html">404页面</a>
                            </li>
                            <li><a href="500.html">500页面</a>
                            </li>
                            <li><a href="empty_page.html">空白页</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="index.html#"><i class="fa fa-flask"></i> <span class="nav-label">UI元素</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="typography.html">排版</a>
                            </li>
                            <li><a href="icons.html">字体图标</a>
                            </li>
                            <li><a href="iconfont.html">阿里巴巴矢量图标库</a>
                            </li>
                            <li><a href="draggable_panels.html">拖动面板</a>
                            </li>
                            <li><a href="buttons.html">按钮</a>
                            </li>
                            <li><a href="tabs_panels.html">选项卡 & 面板</a>
                            </li>
                            <li><a href="notifications.html">通知 & 提示</a>
                            </li>
                            <li><a href="badges_labels.html">徽章，标签，进度条</a>
                            </li>
                            <li><a href="layer.html">Web弹层组件layer</a>
                            </li>
                            <li><a href="tree_view.html">树形视图</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="grid_options.html"><i class="fa fa-laptop"></i> <span class="nav-label">栅格</span></a>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-table"></i> <span class="nav-label">表格</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="table_basic.html">基本表格</a>
                            </li>
                            <li><a href="table_data_tables.html">数据表格(DataTables)</a>
                            </li>
                            <li><a href="table_jqgrid.html">jqGrid</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-picture-o"></i> <span class="nav-label">图库</span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="basic_gallery.html">基本图库</a>
                            </li>
                            <li><a href="carousel.html">图片切换</a>
                            </li>

                        </ul>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-sitemap"></i> <span class="nav-label">菜单 </span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="index.html#">三级菜单 <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="index.html#">三级菜单 01</a>
                                    </li>
                                    <li>
                                        <a href="index.html#">三级菜单 01</a>
                                    </li>
                                    <li>
                                        <a href="index.html#">三级菜单 01</a>
                                    </li>

                                </ul>
                            </li>
                            <li><a href="index.html#">二级菜单</a>
                            </li>
                            <li>
                                <a href="index.html#">二级菜单</a>
                            </li>
                            <li>
                                <a href="index.html#">二级菜单</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="webim.html"><i class="fa fa-comments"></i> <span class="nav-label">即时通讯</span><span class="label label-danger pull-right">New</span></a>
                    </li>
                    <li>
                        <a href="css_animation.html"><i class="fa fa-magic"></i> <span class="nav-label">CSS动画</span></a>
                    </li>
                    <li>
                        <a href="index.html#"><i class="fa fa-cutlery"></i> <span class="nav-label">工具 </span><span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="form_builder.html">表单构建器</a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>
        </nav>

        <div id="page-wrapper" class="gray-bg dashbard-1">
            <div class="row border-bottom">
                <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                    <div class="navbar-header">
                        <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="form_advanced.html#"><i class="fa fa-bars"></i> </a>
                        <form role="search" class="navbar-form-custom" method="post" action="search_results.html">
                            <div class="form-group">
                                <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        <li>
                            <span class="m-r-sm text-muted welcome-message"><a href="index.html" title="返回首页"><i class="fa fa-home"></i></a>欢迎使用H+后台主题</span>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="index.html#">
                                <i class="fa fa-envelope"></i>  <span class="label label-warning">16</span>
                            </a>
                            <ul class="dropdown-menu dropdown-messages">
                                <li>
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a7.jpg">
                                        </a>
                                        <div class="media-body">
                                            <small class="pull-right">46小时前</small>
                                            <strong>小四</strong> 项目已处理完结
                                            <br>
                                            <small class="text-muted">3天前 2014.11.8</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="dropdown-messages-box">
                                        <a href="profile.html" class="pull-left">
                                            <img alt="image" class="img-circle" src="img/a4.jpg">
                                        </a>
                                        <div class="media-body ">
                                            <small class="pull-right text-navy">25小时前</small>
                                            <strong>国民岳父</strong> 这是一条测试信息
                                            <br>
                                            <small class="text-muted">昨天</small>
                                        </div>
                                    </div>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a href="mailbox.html">
                                            <i class="fa fa-envelope"></i>  <strong> 查看所有消息</strong>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle count-info" data-toggle="dropdown" href="index.html#">
                                <i class="fa fa-bell"></i>  <span class="label label-primary">8</span>
                            </a>
                            <ul class="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="mailbox.html">
                                        <div>
                                            <i class="fa fa-envelope fa-fw"></i> 您有16条未读消息
                                            <span class="pull-right text-muted small">4分钟前</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="profile.html">
                                        <div>
                                            <i class="fa fa-qq fa-fw"></i> 3条新回复
                                            <span class="pull-right text-muted small">12分钟钱</span>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <div class="text-center link-block">
                                        <a href="notifications.html">
                                            <strong>查看所有 </strong>
                                            <i class="fa fa-angle-right"></i>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </li>


                        <li>
                            <a href="login.html">
                                <i class="fa fa-sign-out"></i> 退出
                            </a>
                        </li>
                    </ul>

                </nav>
            </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>高级表单元素</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">主页</a>
                        </li>
                        <li>
                            <a>表单</a>
                        </li>
                        <li>
                            <strong>高级表单元素</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-5">

                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>旋钮输入 <small>http://anthonyterrien.com/knob/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                            旋钮输入
                        </h3>
                                <p>
                                    轻松创建旋钮输入
                                </p>
                                <div class="text-center">
                                    <small>简单示例</small>
                                    <br/>
                                    <br/>
                                    <div class="m-r-md inline">
                                        <input type="text" value="75" class="dial m-r-sm" data-fgColor="#1AB394" data-width="85" data-height="85" />
                                    </div>
                                    <div class="m-r-md inline">
                                        <input type="text" value="25" class="dial m-r" data-fgColor="#1AB394" data-width="85" data-height="85" />
                                    </div>
                                    <div class="m-r-md inline">
                                        <input type="text" value="50" class="dial m-r" data-fgColor="#1AB394" data-width="85" data-height="85" />
                                    </div>
                                </div>
                                <div class="text-center">
                                    <small>动态旋钮输入示例</small>
                                    <br/>
                                    <br/>
                                    <div class="m-r-md inline">
                                        <input type="text" value="75" class="dial m-r-sm" data-fgColor="#ED5565" data-width="85" data-height="85" data-cursor=true data-thickness=.3/>
                                    </div>
                                    <div class="m-r-md inline">
                                        <input type="text" value="25" class="dial m-r" data-fgColor="#ED5565" data-width="85" data-height="85" data-step="1000" data-min="-15000" data-max="15000" data-displayPrevious=true/>
                                    </div>
                                    <div class="m-r-md inline">
                                        <input type="text" value="60" class="dial m-r" data-fgColor="#ED5565" data-width="85" data-height="85" data-angleOffset=-125 data-angleArc=250 />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>切换开关 <small>http://abpetkov.github.io/switchery/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                            切换开关
                        </h3>
                                <p>
                                    给复选按钮加上IOS7风格
                                </p>
                                <input type="checkbox" class="js-switch" checked />
                                <input type="checkbox" class="js-switch_2" checked />
                                <br/>
                                <br/>
                                <input type="checkbox" class="js-switch_3" />
                            </div>
                        </div>

                    </div>
                    <div class="col-lg-7">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>范围滑块 <small>https://github.com/IonDen/ion.rangeSlider</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                                滑块
                            </h3>
                                <p>
                                    在指定范围内选择
                                </p>
                                <div class="m-b-sm">
                                    <small><strong>示例：</strong> 设置值为0-5000，后缀“+”来表示最大值，人民币符号作为前缀，使用刻度</small>
                                </div>
                                <div id="ionrange_1"></div>

                                <div class="m-b-sm m-t">
                                    <small><strong>示例：</strong> 设置值为0-10，步长：0.1，使用刻度  </small>
                                </div>
                                <div id="ionrange_2"></div>

                                <div class="m-b-sm m-t">
                                    <small><strong>示例：</strong> 设置值微从-50~+50，默认为0， 并使用摄氏度符号作为后缀，使用刻度  </small>
                                </div>
                                <div id="ionrange_3"></div>

                                <div class="m-b-sm m-t">
                                    <small><strong>示例:</strong>使用数组设置滑块值为月数，数组可以使任意长度，滑块将自动适应 </small>
                                </div>
                                <div id="ionrange_4"></div>

                                <div>
                                    <a class="btn btn-white pull-right btn-sm" href="https://github.com/IonDen/ion.rangeSlider" target="_blank">API文档</a>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>范围滑块 <small>http://refreshless.com/nouislider/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                                范围滑块
                            </h3>
                                <p>
                                    简单干净的范围选择滑块
                                </p>
                                <div class="row m-b-lg">
                                    <div class="col-lg-12">
                                        <div id="drag-fixed" class="slider_red"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <p class="font-bold">简单示例</p>
                                        <div id="basic_slider"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <p class="font-bold">在指定范围内进行选择示例</p>
                                        <div id="range_slider"></div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>

                </div>
                <div class="row">

                    <div class="col-lg-5">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>日期选择器 <small>https://github.com/eternicode/bootstrap-datepicker</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                                日期选择器
                            </h3>
                                <p>
                                    简单好用的日期选择器
                                </p>

                                <div class="form-group" id="data_1">
                                    <label class="font-noraml">简单示例</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" value="2014-11-11">
                                    </div>
                                </div>

                                <div class="form-group" id="data_2">
                                    <label class="font-noraml">年视图</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" value="2014-11-11">
                                    </div>
                                </div>

                                <div class="form-group" id="data_3">
                                    <label class="font-noraml">10年视图</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" value="2014-11-11">
                                    </div>
                                </div>

                                <div class="form-group" id="data_4">
                                    <label class="font-noraml">选择月份</label>
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" value="2014-11-11">
                                    </div>
                                </div>

                                <div class="form-group" id="data_5">
                                    <label class="font-noraml">范围选择</label>
                                    <div class="input-daterange input-group" id="datepicker">
                                        <input type="text" class="input-sm form-control" name="start" value="2014-11-11" />
                                        <span class="input-group-addon">到</span>
                                        <input type="text" class="input-sm form-control" name="end" value="2014-11-17" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>下拉列表 <small>http://harvesthq.github.io/chosen/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                                下拉选择
                            </h3>
                                <p>
                                    这个比较有名气啦，不多说
                                </p>
                                <div class="form-group">
                                    <label class="font-noraml">基本示例</label>
                                    <div class="input-group">
                                        <select data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2">
                                            <option value="">请选择省份</option>
                                            <option value="110000" hassubinfo="true">北京</option>
                                            <option value="120000" hassubinfo="true">天津</option>
                                            <option value="130000" hassubinfo="true">河北省</option>
                                            <option value="140000" hassubinfo="true">山西省</option>
                                            <option value="150000" hassubinfo="true">内蒙古自治区</option>
                                            <option value="210000" hassubinfo="true">辽宁省</option>
                                            <option value="220000" hassubinfo="true">吉林省</option>
                                            <option value="230000" hassubinfo="true">黑龙江省</option>
                                            <option value="310000" hassubinfo="true">上海</option>
                                            <option value="320000" hassubinfo="true">江苏省</option>
                                            <option value="330000" hassubinfo="true">浙江省</option>
                                            <option value="340000" hassubinfo="true">安徽省</option>
                                            <option value="350000" hassubinfo="true">福建省</option>
                                            <option value="360000" hassubinfo="true">江西省</option>
                                            <option value="370000" hassubinfo="true">山东省</option>
                                            <option value="410000" hassubinfo="true">河南省</option>
                                            <option value="420000" hassubinfo="true">湖北省</option>
                                            <option value="430000" hassubinfo="true">湖南省</option>
                                            <option value="440000" hassubinfo="true">广东省</option>
                                            <option value="450000" hassubinfo="true">广西壮族自治区</option>
                                            <option value="460000" hassubinfo="true">海南省</option>
                                            <option value="500000" hassubinfo="true">重庆</option>
                                            <option value="510000" hassubinfo="true">四川省</option>
                                            <option value="520000" hassubinfo="true">贵州省</option>
                                            <option value="530000" hassubinfo="true">云南省</option>
                                            <option value="540000" hassubinfo="true">西藏自治区</option>
                                            <option value="610000" hassubinfo="true">陕西省</option>
                                            <option value="620000" hassubinfo="true">甘肃省</option>
                                            <option value="630000" hassubinfo="true">青海省</option>
                                            <option value="640000" hassubinfo="true">宁夏回族自治区</option>
                                            <option value="650000" hassubinfo="true">新疆维吾尔自治区</option>
                                            <option value="710000" hassubinfo="true">台湾省</option>
                                            <option value="810000" hassubinfo="true">香港特别行政区</option>
                                            <option value="820000" hassubinfo="true">澳门特别行政区</option>
                                            <option value="990000" hassubinfo="true">海外</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="font-noraml">多选</label>
                                    <div class="input-group">
                                        <select data-placeholder="选择省份" class="chosen-select" multiple style="width:350px;" tabindex="4">
                                            <option value="">请选择省份</option>
                                            <option value="110000" hassubinfo="true">北京</option>
                                            <option value="120000" hassubinfo="true">天津</option>
                                            <option value="130000" hassubinfo="true">河北省</option>
                                            <option value="140000" hassubinfo="true">山西省</option>
                                            <option value="150000" hassubinfo="true">内蒙古自治区</option>
                                            <option value="210000" hassubinfo="true">辽宁省</option>
                                            <option value="220000" hassubinfo="true">吉林省</option>
                                            <option value="230000" hassubinfo="true">黑龙江省</option>
                                            <option value="310000" hassubinfo="true">上海</option>
                                            <option value="320000" hassubinfo="true">江苏省</option>
                                            <option value="330000" hassubinfo="true">浙江省</option>
                                            <option value="340000" hassubinfo="true">安徽省</option>
                                            <option value="350000" hassubinfo="true">福建省</option>
                                            <option value="360000" hassubinfo="true">江西省</option>
                                            <option value="370000" hassubinfo="true">山东省</option>
                                            <option value="410000" hassubinfo="true">河南省</option>
                                            <option value="420000" hassubinfo="true">湖北省</option>
                                            <option value="430000" hassubinfo="true">湖南省</option>
                                            <option value="440000" hassubinfo="true">广东省</option>
                                            <option value="450000" hassubinfo="true">广西壮族自治区</option>
                                            <option value="460000" hassubinfo="true">海南省</option>
                                            <option value="500000" hassubinfo="true">重庆</option>
                                            <option value="510000" hassubinfo="true">四川省</option>
                                            <option value="520000" hassubinfo="true">贵州省</option>
                                            <option value="530000" hassubinfo="true">云南省</option>
                                            <option value="540000" hassubinfo="true">西藏自治区</option>
                                            <option value="610000" hassubinfo="true">陕西省</option>
                                            <option value="620000" hassubinfo="true">甘肃省</option>
                                            <option value="630000" hassubinfo="true">青海省</option>
                                            <option value="640000" hassubinfo="true">宁夏回族自治区</option>
                                            <option value="650000" hassubinfo="true">新疆维吾尔自治区</option>
                                            <option value="710000" hassubinfo="true">台湾省</option>
                                            <option value="810000" hassubinfo="true">香港特别行政区</option>
                                            <option value="820000" hassubinfo="true">澳门特别行政区</option>
                                            <option value="990000" hassubinfo="true">海外</option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>固定格式文本 <small>http://jasny.github.io/bootstrap/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <h3>
                                固定格式文本
                            </h3>
                                <p>
                                    可以按指定格式格式化输入的文本内容。
                                </p>
                                <form class="form-horizontal m-t-md" action="form_advanced.html#">
                                    <div class="form-group">
                                        <label class="col-sm-2 col-sm-2 control-label">ISBN 1</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="">
                                            <span class="help-block">999-99-999-9999-9</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">ISBN 2</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="999 99 999 9999 9" placeholder="">
                                            <span class="help-block">999 99 999 9999 9</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">ISBN 3</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="999/99/999/9999/9" placeholder="">
                                            <span class="help-block">999/99/999/9999/9</span>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">IPV4</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="999.999.999.9999" placeholder="">
                                            <span class="help-block">192.168.100.200</span>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">税务代码</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="99-9999999" placeholder="">
                                            <span class="help-block">99-9999999</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">电话</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="9999-9999999" placeholder="">
                                            <span class="help-block">(999) 999-9999</span>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">货币</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="&yen; 999,999,999.99" placeholder="">
                                            <span class="help-block">&yen; 999,999,999.99</span>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">日期</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" data-mask="9999-99-99" placeholder="">
                                            <span class="help-block">yyyy-mm-dd</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>拾色器 <small>http://mjolnic.github.io/bootstrap-colorpicker/</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_advanced.html#">
                                        <i class="fa fa-wrench"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-user">
                                        <li><a href="form_advanced.html#">选项1</a>
                                        </li>
                                        <li><a href="form_advanced.html#">选项2</a>
                                        </li>
                                    </ul>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="row m-t">
                                    <div class="col-lg-10">
                                        <div class="form-group">
                                            <label class="font-noraml">普通的16进制颜色</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control colorpicker-demo1" value="#5367ce" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">作为部件使用</label>
                                            <div class="input-group colorpicker-demo2">
                                                <input type="text" value="" class="form-control" />
                                                <span class="input-group-addon"><i></i></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">事件</label>
                                            <div class="well">
                                                <a href="form_advanced.html#" class="btn small demo colorpicker-element" id="demo_apidemo" data-color="rgb(255, 255, 255)">改变背景颜色</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">RGBA颜色</label>
                                            <div class="input-group colorpicker-demo3">
                                                <input type="text" value="" class="form-control" />
                                                <span class="input-group-addon"><i></i></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">内联模式</label>
                                            <div class="well">
                                                <div id="demo_cont" class="demo demo-auto inl-bl inline" data-container="#demo_cont" data-color="rgba(150,216,62,0.55)" data-inline="true"></div>
                                                <div class="demo demo-auto inl-bl inline" data-container="true" data-color="rgb(50,216,62)" data-inline="true"></div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">禁用 / 启用</label>
                                            <div class="well">
                                                <div id="demo_endis" class="input-group demo demo-auto colorpicker-component">
                                                    <input disabled type="text" value="" class="form-control" />
                                                    <span class="input-group-addon"><i></i></span>
                                                </div>
                                                <br>
                                                <a class="btn btn-sm btn-default enable-button" href="form_advanced.html#">启用</a>
                                                <a class="btn btn-sm btn-default disable-button" href="form_advanced.html#">禁用</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="font-noraml">Bootstrap弹层</label>
                                            <div class="well">
                                                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">显示</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2">
                                        <a class="btn btn-white demo-destroy btn-block" href="form_advanced.html#"><i class="glyphicon glyphicon-remove"></i> 销毁插件</a>
                                        <a class="btn btn-white demo-create btn-block" href="form_advanced.html#"><i class="glyphicon glyphicon-plus"></i> 重新创建</a> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="pull-right">
                    By：<a href="http://www.zi-han.net" target="_blank">zihan's blog</a>
                </div>
                <div>
                    <strong>Copyright</strong> H+ &copy; 2014
                </div>
            </div>

        </div>
    </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">颜色选择</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group colorpicker-component demo demo-auto">
                        <input type="text" value="" class="form-control" />
                        <span class="input-group-addon"><i></i></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Mainly scripts -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.min.js?v=3.4.0"></script>

    <!-- Custom and plugin javascript -->
    <script src="js/hplus.js?v=2.2.0"></script>
    <script src="js/plugins/pace/pace.min.js"></script>

    <!-- Chosen -->
    <script src="js/plugins/chosen/chosen.jquery.js"></script>

    <!-- JSKnob -->
    <script src="js/plugins/jsKnob/jquery.knob.js"></script>

    <!-- Input Mask-->
    <script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

    <!-- Data picker -->
    <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>

    <!-- NouSlider -->
    <script src="js/plugins/nouslider/jquery.nouislider.min.js"></script>

    <!-- Switchery -->
    <script src="js/plugins/switchery/switchery.js"></script>

    <!-- IonRangeSlider -->
    <script src="js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <!-- MENU -->
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <!-- COLORPICKER -->
    <script src="js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>

    <script>
        $(document).ready(function () {

            $('#data_1 .input-group.date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                calendarWeeks: true,
                autoclose: true
            });

            $('#data_2 .input-group.date').datepicker({
                startView: 1,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            $('#data_3 .input-group.date').datepicker({
                startView: 2,
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            $('#data_4 .input-group.date').datepicker({
                minViewMode: 1,
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                todayHighlight: true
            });

            $('#data_5 .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });

            var elem = document.querySelector('.js-switch');
            var switchery = new Switchery(elem, {
                color: '#1AB394'
            });

            var elem_2 = document.querySelector('.js-switch_2');
            var switchery_2 = new Switchery(elem_2, {
                color: '#ED5565'
            });

            var elem_3 = document.querySelector('.js-switch_3');
            var switchery_3 = new Switchery(elem_3, {
                color: '#1AB394'
            });

            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': {
                allow_single_deselect: true
            },
            '.chosen-select-no-single': {
                disable_search_threshold: 10
            },
            '.chosen-select-no-results': {
                no_results_text: 'Oops, nothing found!'
            },
            '.chosen-select-width': {
                width: "95%"
            }
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }

        $("#ionrange_1").ionRangeSlider({
            min: 0,
            max: 5000,
            type: 'double',
            prefix: "&yen;",
            maxPostfix: "+",
            prettify: false,
            hasGrid: true
        });

        $("#ionrange_2").ionRangeSlider({
            min: 0,
            max: 10,
            type: 'single',
            step: 0.1,
            postfix: " 克",
            prettify: false,
            hasGrid: true
        });

        $("#ionrange_3").ionRangeSlider({
            min: -50,
            max: 50,
            from: 0,
            postfix: "°",
            prettify: false,
            hasGrid: true
        });

        $("#ionrange_4").ionRangeSlider({
            values: [
                "一月", "二月", "三月",
                "四月", "五月", "六月",
                "七月", "八月", "九月",
                "十月", "十一月", "十二月"
            ],
            type: 'single',
            hasGrid: true
        });

        $("#ionrange_5").ionRangeSlider({
            min: 10000,
            max: 100000,
            step: 100,
            postfix: " km",
            from: 55000,
            hideMinMax: true,
            hideFromTo: false
        });

        $(".dial").knob();

        $("#basic_slider").noUiSlider({
            start: 40,
            behaviour: 'tap',
            connect: 'upper',
            range: {
                'min': 20,
                'max': 80
            }
        });

        $("#range_slider").noUiSlider({
            start: [40, 60],
            behaviour: 'drag',
            connect: true,
            range: {
                'min': 20,
                'max': 80
            }
        });

        $("#drag-fixed").noUiSlider({
            start: [40, 60],
            behaviour: 'drag-fixed',
            connect: true,
            range: {
                'min': 20,
                'max': 80
            }
        });


        $(function () {

            $('.colorpicker-demo1').colorpicker();

            $('.colorpicker-demo2').colorpicker();

            $('.colorpicker-demo3').colorpicker();

            // Code for demos
            function createColorpickers() {
                // Api demo
                var bodyStyle = $('body')[0].style;
                $('#demo_apidemo').colorpicker({
                    color: bodyStyle.backgroundColor
                }).on('changeColor', function (ev) {
                    bodyStyle.backgroundColor = ev.color.toHex();
                });

                // Horizontal mode
                $('#demo_forceformat').colorpicker({
                    format: 'rgba', // force this format
                    horizontal: true
                });

                $('.demo-auto').colorpicker();

                // Disabled / enabled triggers
                $(".disable-button").click(function (e) {
                    e.preventDefault();
                    $("#demo_endis").colorpicker('disable');
                });

                $(".enable-button").click(function (e) {
                    e.preventDefault();
                    $("#demo_endis").colorpicker('enable');
                });
            }

            createColorpickers();

            // Create / destroy instances
            $('.demo-destroy').click(function (e) {
                e.preventDefault();
                $('.demo').colorpicker('destroy');
                $(".disable-button, .enable-button").off('click');
            });

            $('.demo-create').click(function (e) {
                e.preventDefault();
                createColorpickers();
            });
        });
    </script>

    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script><!--统计代码，可删除-->

</body>

</html>